﻿@page "/tree-grid/command-column"

@using Syncfusion.Blazor.TreeGrid
@using Syncfusion.Blazor.Grids;

@*Hidden:Lines*@
@using ej2_blazor_selfdata
@inherits SampleBaseComponent;
@*End:Hidden*@

<SampleDescription>
    <p>This sample demonstrates CRUD operations in Tree Grid using the command column. You can perform CRUD operations as follows, </p>
    <ul><li><code>Edit</code> - To edit record, double click a row or click Edit button from command column after selecting a row.</li>
        <li><code>Delete</code> - To delete record, click Delete button from command column after selecting a row.</li>
        <li><code>Update, Cancel</code> -You can save or discard changes by clicking Update and Cancel button from command column respectively.</li>
    </ul>
</SampleDescription>
<ActionDescription>
 <p>The Tree Grid provides an option to render CRUD action buttons in a column by using the CommandColumn feature. The <code>Commands</code> property accepts array of CommandModel object. The predefined command button can be defined by using the Type property.</p>
  <p>The built-in command buttons are,</p>
    <ul><li><code>CommandButtonType.Edit </code></li>
        <li><code>CommandButtonType.Delete</code></li>
        <li><code>CommandButtonType.Cancel</code></li>
        <li><code>CommandButtonType.Save</code></li>
    </ul>
    <p>More information on the command column configuration can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/treegrid/edit/#command-column'>documentation</a> section.</p>  
</ActionDescription>


<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfTreeGrid DataSource="@TreeData" IdMapping="TaskID" ParentIdMapping="ParentID" TreeColumnIndex="1" AllowPaging="true" Height="400">
                <TreeGridPageSettings PageSize="2"></TreeGridPageSettings>
                <TreeGridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="Syncfusion.Blazor.TreeGrid.EditMode.Row"></TreeGridEditSettings>
                <TreeGridColumns>
                    <TreeGridColumn Field="TaskID" HeaderText="Task ID" Width="80" ValidationRules="@(new ValidationRules() { Required=true, Number=true })" IsPrimaryKey="true" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="TaskName" HeaderText="Task Name" ValidationRules="@(new ValidationRules() { Required=true })" Width="165"></TreeGridColumn>
                    <TreeGridColumn Field="StartDate" HeaderText="Start Date" Format="d" Type=ColumnType.Date Width="120" TextAlign="TextAlign.Right" EditType=EditType.DatePickerEdit></TreeGridColumn>
                    <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100"  ValidationRules="@(new ValidationRules() { Number = true , Min = 0 })" TextAlign="TextAlign.Right" EditorSettings="DurationParams"></TreeGridColumn>
                    <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" EditType="Syncfusion.Blazor.Grids.EditType.DropDownEdit"></TreeGridColumn>
                    <TreeGridColumn HeaderText="Manage Records" Width="140">
                        <TreeGridCommandColumns>
                            <TreeGridCommandColumn Type="CommandButtonType.Edit" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-edit", CssClass="e-flat" })"></TreeGridCommandColumn>
                            <TreeGridCommandColumn Type="CommandButtonType.Delete" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-delete", CssClass="e-flat" })"></TreeGridCommandColumn>
                            <TreeGridCommandColumn Type="CommandButtonType.Save" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-save", CssClass="e-flat" })"></TreeGridCommandColumn>
                            <TreeGridCommandColumn Type="CommandButtonType.Cancel" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-cancel-icon", CssClass="e-flat" })"></TreeGridCommandColumn>
                        </TreeGridCommandColumns>
                    </TreeGridColumn>
                </TreeGridColumns>
            </SfTreeGrid>
        </div>
    </div>
</div>

@code{

    public List<SelfReferenceData> TreeData { get; set; }

    private Syncfusion.Blazor.Grids.NumericEditCellParams DurationParams = new Syncfusion.Blazor.Grids.NumericEditCellParams()
    {
        Params = new Syncfusion.Blazor.Inputs.NumericTextBoxModel<object>() { Format = "N2", ShowSpinButton = true }
    };

    protected override void OnInitialized()
    {
        this.TreeData = SelfReferenceData.GetTree().ToList();

    }
}
